import { useMemo, useImperativeHandle, forwardRef } from "react";
import {
	Form,
	Input,
	InputNumber,
	Select,
	Cascader,
	DatePicker,
	Button,
} from "antd";
import CommonSearchSelect from "./CommonSearchSelect";
import CommonSearchCascader, {
	treeNodeObjProps,
	searchParamProps,
} from "./CommonSearchCascader";

import CommonRange from "./CommonRange";
import moment from "moment";
import "./index.scss";
declare const theTypes: ["normal", "customer"];
declare const theFilterTypes: [
	"select",
	"input",
	"searchCascader",
	"searchSelect",
	"cascader",
	"datePicker",
	"rangePicker"
];
declare type theType = typeof theTypes[number];
declare type theFilterType = typeof theFilterTypes[number];
interface ForItemArray {
	filterType: theFilterType;
	field: string;
	label: string;
	mode?: any;
	showSearch?: boolean;
	min?: number;
	max?: number;
	options?: [];
	placeholder?: string;
	width?: number;
	fatherNode?: boolean;
	fieldNames?: any;
	allowClear?: boolean;
	preSearchParam?: object;
	formatter?: any;
	parser?: any;
	labelInValue?: boolean;
	searchParam?: searchParamProps;
	treeNodeObj?: treeNodeObjProps;
}

interface CommonFilterBarProps {
	type?: theType;
	filterList: Array<ForItemArray[]> | any;
	onChange?: Function;
}

const { RangePicker } = DatePicker;

function CommonFilterBar(props: CommonFilterBarProps, ref: any) {
	const { filterList = [], type = "normal", onChange = () => {} } = props;

	const [form] = Form.useForm();

	useImperativeHandle(ref, () => {
		return { setForm, getQueryData };
	});

	const setForm = (data: any) => {
		form.resetFields();
		form.setFieldsValue(data);
	};

	const queryData = () => {
		const data = getQueryData();
		onChange(data);
	};
	const queryDataB = () => {
		if (type === "customer") {
			queryData();
		}
	};
	const getQueryData = () => {
		const formData = form.getFieldsValue();
		let data: any = {};
		for (let item in formData) {
			if (!!formData[item]) {
				if (formData[item] instanceof moment) {
					data[item] = formData[item].format("YYYY-MM-DD 00:00:00");
				} else if (
					Array.isArray(formData[item]) &&
					!!formData[item].length
				) {
					data[item] = [];
					if (formData[item][0] instanceof moment) {
						for (let i in formData[item]) {
							data[item][i] = formData[item][i].format(
								"YYYY-MM-DD 00:00:00"
							);
						}
					} else {
						data[item] = formData[item];
					}
				} else if (
					Array.isArray(formData[item]) &&
					!formData[item].length
				) {
					continue;
				} else {
					data[item] = formData[item];
				}
			}
		}
		return data;
	};
	const resetData = () => {
		form.resetFields();
	};

	const renderFormItems = (lineItems: []) => {
		return lineItems.map((item) => {
			let {
				filterType,
				field,
				label = "获取失败",
				placeholder,
				mode = undefined,
				allowClear = false,
				options,
				width,
				fieldNames,
				showSearch = false,
				fatherNode = true,
				searchFunc,
				style = {},
				preSearchParam = {},
				searchParam = {
					paramField: "",
					optionField: "",
					defaultValue: "",
				},
				treeNodeObj = { selfId: "", parentId: "" },
				min,
				max,
				formatter,
				parser,
				labelInValue = false,
			} = item;
			if (filterType === "rangePercent") {
				return (
					<Form.Item
						className="form-item"
						label={label}
						name={field}
						key={field}
						style={{ width: `${width}px` }}
					>
						<CommonRange onChange={queryDataB} />
					</Form.Item>
				);
			}
			if (filterType === "searchCascader") {
				return (
					<Form.Item
						className="form-item"
						label={label}
						name={field}
						key={field}
						style={{ width: `${width}px` }}
					>
						<CommonSearchCascader
							allowClear={allowClear}
							changeOnSelect
							labelInValue
							placeholder={placeholder}
							searchFunc={searchFunc}
							fieldNames={fieldNames}
							searchParam={searchParam}
							treeNodeObj={treeNodeObj}
						/>
					</Form.Item>
				);
			}
			if (filterType === "searchSelect") {
				return (
					<Form.Item
						className="form-item"
						label={label}
						name={field}
						key={field}
						style={{ width: `${width}px` }}
					>
						<CommonSearchSelect
							allowClear={allowClear}
							labelInValue={labelInValue}
							mode={mode}
							SearchFunc={searchFunc}
							style={style}
							fieldNames={fieldNames}
							placeholder={placeholder}
							preSearchParam={preSearchParam}
							onChange={queryDataB}
						/>
					</Form.Item>
				);
			}
			if (filterType === "inputNumber") {
				return (
					<Form.Item
						className="form-item"
						label={label}
						name={field}
						key={field}
						style={{ width: `${width}px` }}
					>
						<InputNumber
							min={min}
							max={max}
							formatter={formatter}
							parser={parser}
							onChange={queryDataB}
						/>
					</Form.Item>
				);
			}
			if (filterType === "input") {
				return (
					<Form.Item
						className="form-item"
						label={label}
						name={field}
						key={field}
						style={{ width: `${width}px` }}
						getValueFromEvent={(e) => {
							return e.target.value.trim();
						}}
					>
						<Input
							allowClear={allowClear}
							placeholder={placeholder || "请填写"}
							onChange={queryDataB}
						/>
					</Form.Item>
				);
			}
			if (filterType === "select") {
				return (
					<Form.Item
						className="form-item"
						label={label}
						name={field}
						key={field}
						style={{ width: `${width}px` }}
					>
						<Select
							labelInValue={labelInValue}
							onChange={queryDataB}
							showSearch={showSearch}
							mode={mode}
							options={options}
							placeholder={placeholder || "请选择"}
							optionFilterProp="label"
							allowClear={allowClear}
						></Select>
					</Form.Item>
				);
			}
			if (filterType === "cascader") {
				return (
					<Form.Item
						className="form-item"
						label={label}
						name={field}
						key={field}
						style={{ width: `${width}px` }}
					>
						<Cascader
							allowClear={allowClear}
							onChange={queryDataB}
							options={options}
							changeOnSelect={fatherNode}
							fieldNames={fieldNames}
							expandTrigger="hover"
							placeholder={placeholder || "请选择"}
						/>
					</Form.Item>
				);
			}
			if (filterType === "datePicker") {
				return (
					<Form.Item
						className="form-item"
						label={label}
						name={field}
						key={field}
						style={{ width: `${width}px` }}
					>
						<DatePicker
							style={{ width: "100%" }}
							onChange={queryDataB}
						/>
					</Form.Item>
				);
			}
			if (filterType === "rangePicker") {
				return (
					<Form.Item
						className="form-item range-picker"
						label={label}
						name={field}
						key={field}
						style={{ width: `${width}px` }}
					>
						<RangePicker
							style={{ width: "100%" }}
							onChange={queryDataB}
						/>
					</Form.Item>
				);
			}
			return null;
		});
	};
	const formItems = useMemo(() => {
		if (!filterList.length) {
			return null;
		}
		if (type === "customer") {
			return filterList.map((lineItems: any, index: number) => {
				return (
					<div className="customer-line" key={index}>
						{renderFormItems(lineItems)}
					</div>
				);
			});
		}
		return (
			<div className="normal-line">
				{renderFormItems(filterList)}
				{type === "normal" && (
					<div
						className="buttons-box form-item"
						style={{
							width: `${
								!!filterList.length &&
								filterList.length % 3 === 0
									? "100"
									: "30"
							}%`,
						}}
					>
						<Button type="primary" onClick={queryData}>
							查询
						</Button>
						<Button className="reset-button" onClick={resetData}>
							重置
						</Button>
					</div>
				)}
			</div>
		); // eslint-disable-next-line
	}, [filterList, type]);

	return (
		<>
			<Form form={form} layout="inline" className="common-filter-bar">
				<div style={{ width: "100%" }}>{formItems}</div>
			</Form>
		</>
	);
}

export default forwardRef(CommonFilterBar);
